<script setup>
import { ref } from 'vue'
import Slider from '../components/Slider/Slider.vue'

// 基础使用
const value = ref(30)

// 垂直滑块
const volume = ref(50)

// 带刻度和步进
const progress = ref(50)

// 禁用状态
const disabledValue = ref(25)

// 点状刻度
const rangeValue = ref(60)

// 自定义样式
const customValue = ref(40)
</script>

<template>
  <div class="slider-demo">
    <h2>1. 基础使用</h2>
    <Slider
        v-model:value="value"
        @change="val => console.log('changed:', val)"
    />
    <div class="value-display">当前值: {{ value }}</div>

    <h2>2. 垂直滑块带颜色</h2>
    <div style="height: 200px; padding: 20px 0;">
      <Slider
          v-model:value="volume"
          orientation="vertical"
          color="#ff4757"
          :min="0"
          :max="100"
      />
    </div>
    <div class="value-display">音量: {{ volume }}%</div>


    <h2>3. 显示刻度和步进</h2>
    <Slider
        v-model:value="progress"
        :step="10"
        :marks="{ 0: 'Start', 50: 'Half', 100: 'End' }"
        @change="val => console.log('progress:', val)"
    />
    <div class="value-display">进度: {{ progress }}%</div>

    <h2>4. 禁用状态</h2>
    <Slider
        v-model:value="disabledValue"
        :disabled="true"
        :showTooltip="false"
        style="height:50px;"
    />
    <div class="value-display">禁用值: {{ disabledValue }}</div>

    <h2>5. 点状刻度</h2>
    <Slider
        v-model:value="rangeValue"
        :dots="true"
        :marks="{ 20: '', 40: '', 60: '', 80: '' }"
        @change="val => console.log('range:', val)"
    />
    <div class="value-display">当前值: {{ rangeValue }}</div>

    <h2>6. 自定义样式</h2>
    <Slider
        v-model:value="customValue"
        color="#2ed573"
        class="custom-slider"
        @change="val => console.log('custom:', val)"
    />
    <div class="value-display">自定义值: {{ customValue }}</div>
  </div>
</template>

<style scoped>
.slider-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.value-display {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

h2 {
  margin: 120px 0 15px;
  font-size: 18px;
  color: #333;
}

.custom-slider .slider-track {
  height: 8px;
  border-radius: 8px;
}

.custom-slider .slider-thumb {
  width: 24px;
  height: 24px;
  border-width: 3px;
}
</style>